<script setup lang="ts">
	import { ref } from "vue"
	const activeIndex = ref(0)
</script>
<template>
	<view class="carasel">
		<swiper :circular="true" :autoplay="false" :interval="3000">
			<swiper-item>
				<navigator url="/pages/index/index" hover-class="none" class="navigator">
					<image mode="aspectFill" class="image"
						src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg"></image>
				</navigator>
			</swiper-item>
<swiper-item>
				<navigator url="/pages/index/index" hover-class="none" class="navigator">
					<image mode="aspectFill" class="image"
						src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg"></image>
				</navigator>
			</swiper-item>
<swiper-item>
				<navigator url="/pages/index/index" hover-class="none" class="navigator">
					<image mode="aspectFill" class="image"
						src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg"></image>
				</navigator>
			</swiper-item>

		</swiper>
		<view class="indicator">
			<text v-for="(item,index) in 3" :key="item" class="dot" :class="{active:index == activeIndex}"></text>
			
		</view>
	</view>
</template>



<style>
	:host{
		display: block;
		height: 280rpx;
	}
	.carasel{
height: 100%;
position: relative;
overflow: hidden;
transform: translateY(0);
background: #efefef;

	}
	.indicator{
		position: absolute;
		left: 0px;
		right: 0px;
		bottom: 16rpx;
		display: flex;
		justify-content: center;
	}
	.dot{
		width: 30rpx;
height: 6rpx;
margin: 0 8rpx;
border-radius: 6rpx;
background-color: rgba(255, 255, 255, 0.4);
	}
	.active{
		background-color: #fff;
	}
	.navigator{

		width: 100%;
		height: 100%;
		
	}
	.image{
		width: 100%;
		height: 100%;
	}
</style>